<script lang="ts" setup>
import { useArticleStore } from '@/common/stores/modules/article';

const { getArticleById, increaseSupport, likedArticles } = useArticleStore()

// 定义一个变量来存储点击获取到的文章唯一ID值
const clickedArticleId = ref();

const article = ref()

// 执行增加或减少字数的函数
const toggleCount = () => {
  const uuid = location.pathname.split('/')[2]
  clickedArticleId.value = uuid
  increaseSupport(uuid);
};


const getCurrentArticleById = () => {
  const articleId = location.pathname.split('/')[2] // -1
  article.value = getArticleById(articleId)
  console.log("article:", article);
}


onMounted(() => {
  getCurrentArticleById()
})

</script>

<template>
  <div class="suspended" v-if="article">
    <div class="suspended-content" @click="toggleCount()">
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg
        t="1731978348683" class="suspended-content-icon" viewBox="0 0 1024 1024" version="1.1"
        xmlns="http://www.w3.org/2000/svg" p-id="2368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
        height="200">
        <path
          d="M153.6 449.163636H209.454545c109.381818 0 167.563636-86.109091 167.563637-176.872727V174.545455c0-4.654545 0-11.636364 2.327273-16.29091 9.309091-51.2 58.181818-86.109091 109.381818-76.8l13.963636 2.327273c46.545455 6.981818 86.109091 37.236364 104.727273 79.127273 18.618182 39.563636 25.6 83.781818 18.618182 125.672727l-9.309091 72.145455v2.327272c0 6.981818 4.654545 11.636364 11.636363 11.636364h244.363637c44.218182 6.981818 74.472727 46.545455 69.818182 93.090909L861.090909 872.727273c-4.654545 39.563636-39.563636 69.818182-81.454545 69.818182H172.218182c-37.236364 0-67.490909-30.254545-69.818182-67.49091l-18.618182-353.745454c-2.327273-39.563636 27.927273-72.145455 67.490909-72.145455h2.327273z m160.581818 423.563637h465.454546c4.654545 0 11.636364-4.654545 11.636363-9.309091l81.454546-402.618182c0-6.981818-4.654545-11.636364-9.309091-13.963636H628.363636c-44.218182 0-81.454545-37.236364-81.454545-81.454546v-11.636363l9.309091-72.145455c4.654545-30.254545 0-60.509091-13.963637-86.109091-9.309091-23.272727-30.254545-37.236364-53.527272-41.890909l-13.963637-2.327273c-13.963636-2.327273-25.6 6.981818-27.927272 18.618182v100.072727c0 100.072727-53.527273 200.145455-158.254546 235.054546l25.6 367.709091zM200.145455 516.654545h-23.272728c-13.963636 0-23.272727 11.636364-23.272727 23.272728L162.909091 849.454545c0 11.636364 11.636364 23.272727 23.272727 23.272728h34.909091c13.963636 0 23.272727-9.309091 23.272727-23.272728v-2.327272l-20.945454-307.2c-2.327273-11.636364-11.636364-23.272727-23.272727-23.272728z"
          :fill="likedArticles.includes(article.id) ? '#026ec1' : '#8a919f'"></path>
      </svg>

      <div class="suspended-badge">
        <span class="suspended-badge-span">{{ article.support }}</span>
      </div>
    </div>


  </div>
</template>

<style lang="scss" scoped>
.suspended {
  position: absolute;
  top: 20%;
  left: 50px;
  width: 65px;
  height: 65px;

  &-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background-color: white;
    border-radius: 100px;

    &-icon {
      width: 32px;
      height: 32px;
    }
  }

  &-badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background-color: red;
    border-radius: 100px;

    &-span {
      font-size: 13px;
      color: white;
    }
  }

}

@media screen and (width <=992px) {
  .suspended {
    left: 2rem;
  }
}
</style>
